<html>
	<head>
		<#assign path="${request.contextPath}"/>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta charset="utf-8"/>
		<#include "include/lib.ftl"/>
		<style>
			h1{text-align:center;}
			#onn{margin-top:3rem;}
			th,td{text-align: center;}
			.tab{margin-top:3rem;}
		</style>
	</head>
	<body>
	<#include "include/header.ftl"/>
			<h1>查看类型</h1>
		<div id="onn" class="col-md-6 col-md-offset-3 col-xs-12" style="">
			<div style="text-align: center;">
				<button id="btn-cost" class="btn btn-success">支出</button>
				<button id="btn-income" class="btn">收入</button>
			</div>
			<div class="tab">
				<table style="display:none;" class="table table-striped table-hover table_cost animated">
					<tr>
						<th>类型</th>
						<th>创建时间</th>
					</tr>
					<#list type_cost as cost>
					<tr>
						<td>${cost.typeName}</td>
						<td>${cost.createTime!''}</td>
					</tr>
					</#list>
				</table>
				<table style="display:none;" class="table table-striped table-hover table_income animated">
					<tr>
						<th>类型</th>
						<th>创建时间</th>
					</tr>
					<#list type_income as income>
					<tr>
						<td>${income.typeName}</td>
						<td>${income.createTime!''}</td>
					</tr>
					</#list>
				</table>
			</div>
		</div>
	</body>
	<script>
		$(function(){
			$(".table_cost").css("display","block");
			$(".table_cost").addClass("bounceInRight");
			$("#btn-cost").click(function(){
				$(".table_income").removeClass("bounceInRight");
				$(".table_income").css("display","none");
				$(".table_cost").css("display","block");
				$(".table_cost").addClass("bounceInRight");
				$("#btn-cost").addClass("btn-success");
				$("#btn-income").removeClass("btn-success");
			});
			$("#btn-income").click(function(){
				$(".table_income").removeClass("bounceInRight");
				$(".table_income").css("display","block");
				$(".table_income").addClass("bounceInRight");
				$(".table_cost").css("display","none");
				$("#btn-income").addClass("btn-success");
				$("#btn-cost").removeClass("btn-success");
			});
		});		
	</script>
</html>